<template>
	<view :data-theme="theme">
		<view class="content card">
			<!-- <u-cell-group> -->
			<view class="form-item">
				<label for="sizeX">指令集:</label>
				<view class="sku-select1" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;padding-left: 20rpx;">
					<view class="radio" :class='item.type == printerConfig.direction ? "active" : ""'
						v-for="(item,index) in buttonData" :key="index" @click="attChange(item)">
						{{item.text}}
					</view>
				</view>
			</view>
			<view style="border-bottom: 1px solid #f5f5f5;">
				<!-- 	<u-cell :border="false" v-if="printerConfig.density == ''" title="浓度设置" value="请选择"
						@click="show = true" isLink></u-cell>
					<u-cell :border="false" v-else-if="printerConfig.density != ''" title="浓度设置"
						:value="printerConfig.density" @click="show = true" isLink></u-cell> -->
				<view class="item_content" v-if="printerConfig.density == ''">
					<view class="item_content_left">
						浓度设置
					</view>
					<picker model="selector" @change="confirm" :value="desityDataIndex" :range="columns">
						<view class="item_content_right" style="display: flex;justify-content: center;"
							@click="show = true">
							<span>请选择</span>
							<uni-icons type="forward" size="20"></uni-icons>
						</view>
					</picker>
				</view>
				<view class="item_content" v-else-if="printerConfig.density != ''">
					<view class="item_content_left">
						浓度设置
					</view>
					<picker model="selector" @change="confirm" :value="desityDataIndex" :range="columns">
						<view class="item_content_right" style="display: flex;justify-content: center;"
							@click="show = true">
							<span>{{printerConfig.density}}</span>
							<uni-icons type="forward" size="20"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
			<view style="border-bottom: 1px solid #f5f5f5;">
				<!-- <u-cell :border="false" v-if="printerConfig.speed == ''" title="打印速度设置" value="请选择"
						@click="showSpeed = true" isLink></u-cell>
					<u-cell :border="false" v-else-if="printerConfig.speed != ''" title="打印速度设置"
						:value="printerConfig.speed" @click="showSpeed = true" isLink></u-cell> -->
				<view class="item_content" v-if="printerConfig.speed == ''">
					<view class="item_content_left">
						打印速度设置
					</view>
					<picker model="selector" @change="confirmSpeed" :value="desitySpeedIndex" :range="columnsSpeed">
						<view class="item_content_right" style="display: flex;justify-content: center;"
							@click="showSpeed = true">
							<span>请选择</span>
							<uni-icons type="forward" size="20"></uni-icons>
						</view>
					</picker>
				</view>
				<view class="item_content" v-else-if="printerConfig.speed != ''">
					<view class="item_content_left">
						打印速度设置
					</view>
					<picker model="selector" @change="confirmSpeed" :value="desitySpeedIndex" :range="columnsSpeed">
						<view class="item_content_right" style="display: flex;justify-content: center;"
							@click="showSpeed = true">
							<span>{{printerConfig.speed}}</span>
							<uni-icons type="forward" size="20"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
			<view style="border-bottom: 1px solid #f5f5f5;">
				<!-- <u-cell :border="false" v-if="printerConfig.gap == ''" title="标签间隔设置" value="请选择"
						@click="showGap = true" isLink></u-cell>
					<u-cell :border="false" v-else-if="printerConfig.gap != ''" title="标签间隔设置"
						:value="printerConfig.gap" @click="showGap = true" isLink></u-cell> -->
				<view class="item_content" v-if="printerConfig.gap == ''">
					<view class="item_content_left">
						标签间隔设置
					</view>
					<picker model="selector" @change="confirmGap" :value="configIndex" :range="columnsGap">
						<view class="item_content_right" style="display: flex;justify-content: center;"
							@click="showGap = true">
							<span>请选择</span>
							<uni-icons type="forward" size="20"></uni-icons>
						</view>
					</picker>
				</view>
				<view class="item_content" v-else-if="printerConfig.gap != ''">
					<view class="item_content_left">
						标签间隔设置
					</view>
					<picker model="selector" @change="confirmGap" :value="configIndex" :range="columnsGap">
						<view class="item_content_right" style="display: flex;justify-content: center;"
							@click="showGap = true">
							<span>{{printerConfig.gap}}</span>
							<uni-icons type="forward" size="20"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
			<!-- <u-cell title="纸张规格" :value="radiovalue" @click="showGroup = true" isLink></u-cell> -->
			<view class="item_content">
				<view class="item_content_left">
					纸张规格
				</view>
				<view class="item_content_right" style="display: flex;justify-content: center;"
					@click="showGroup = true">
					<span>{{radiovalue}}</span>
					<uni-icons type="forward" size="20"></uni-icons>
				</view>
			</view>
			<!-- </u-cell-group> -->
		</view>

		<!-- 浓度设置弹窗 -->
		<!-- <u-picker :show="show" title="浓度设置" :columns="columns" @close="show = false" @confirm="confirm"
			@cancel="show = false"></u-picker>

		<u-picker :show="showSpeed" title="打印速度设置" :columns="columnsSpeed" @close="showSpeed = false"
			@confirm="confirmSpeed" @cancel="showSpeed = false"></u-picker>

		<u-picker :show="showGap" title="标签间隔设置" :columns="columnsGap" @close="showGap = false" @confirm="confirmGap"
			@cancel="showGap = false"></u-picker> -->

		<!-- 纸张规格弹窗 -->
		<view>
			<!-- <u-popup :show="showGroup" :round="10" @close="close"> -->
			<tui-drawer mode="bottom" :visible="showGroup" @close="close">
				<view class="u-demo-block">
					<text class="u-demo-block__title">纸张规格<text @click="close" class="iconfont icon-guanbi5"
							style="position: absolute;"></text></text>

					<view class="u-page_checkbox-item">
						<!-- <u-radio-group v-model="radiovalue" iconPlacement="right" :borderBottom="true"
							placement="column">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(subName, index0) in checkboxList"
								:key="subName.id" :label="subName.name" :name="subName.name"
								@change="groupChange(subName)">
							</u-radio>
						</u-radio-group> -->
						<radio-group v-model="radiovalue" @change="groupChange">
							<label
								style="display: flex;flex-direction: row;margin: 20rpx;border-bottom: 1px solid #eee;padding: 20rpx 0;"
								v-for="(subName, index0) in checkboxList" :key="subName.id">
								<view>
									<radio :value="subName.name" />
								</view>
								<view style="line-height: 19px;">{{subName.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</tui-drawer>
			<!-- </u-popup> -->
		</view>

		<view class="footer">
			<view class="footer_button" style="display: flex;">
				<button style="color: #808080;flex: 1;margin-right: 10rpx;border: 1px solid #007aff;"
					@click="setPrinterConfig(true)">恢复默认</button>
				<button style="color: #808080;flex: 1;margin-right: 10rpx;border: 1px solid #007aff;"
					@click="sendBleLabelSelfTest">打印自检页</button>
				<button class="bg_color" style="flex: 1;" @click="setPrinterConfig()">保存</button>
			</view>
		</view>

		<!-- 打印机组件 -->
		<popups ref="popupsRefs" :toggleIndex="toggleIndex" @addCheckboxChange="addCheckboxChange"></popups>
	</view>
</template>

<script>
	import popups from '../components/popups/popups.vue';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	import tuiDrawer from '@/components/tui-drawer/index.vue';
	let app = getApp();
	const HIS_CONNECT_DEVICE_KEY = 'HIS_CONNECT_DEVICE_KEY';
	export default {
		components: {
			popups,
			tuiDrawer
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				// ------------------>
				buttonData: [{
					text: '出纸方向',
					type: 1,
				}, {
					text: '进纸方向',
					type: 0,
				}],

				printerConfig: { //打印机配置
					sizeX: 40, //标签长(mm) 70
					sizeY: 30, //标签宽(mm) 50
					gap: 2, //标签间隔(mm)
					speed: 5, //打印速度(1 - 6)
					density: 8, //打印浓度(1 - 15)
					direction: 1, //打印方向 1.出纸方向 0.进纸方向
				},
				attValue: '1',
				show: false, //浓度弹窗设置
				concentraitonShow: true, //浓度菜单栏隐藏
				columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
				desityDataIndex: 0,
				// ------>
				radiovalue: '70*50mm', //所选的纸张规格
				showGroup: false, //纸张规格弹窗
				checkboxList: [{
					name: '70*50mm',
					id: 1,
					sizeX: 70,
					sizeY: 50,
				}, {
					name: '40*30mm',
					id: 2,
					sizeX: 40, //标签长(mm)
					sizeY: 30, //标签宽(mm)

				}],
				// -------->
				showSpeed: false, // 打印速度弹窗
				columnsSpeed: [1, 2, 3, 4, 5, 6, ],
				desitySpeedIndex: 0,
				// -------->
				showGap: false, //标签间隔
				columnsGap: [1, 2],
				configIndex: 0,
				toggleIndex: 1, //1未连接，2选择连接打印机
			};
		},
		onLoad(options) {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			let device = uni.getStorageSync(HIS_CONNECT_DEVICE_KEY);
			console.log(device)
			if (!device) {
				this.printerConfig = device;
			}
		},
		methods: {
			close() {
				this.show = false;
				this.showGroup = false;
			},
			//浓度设置 确认事件
			// confirm(e) {
			// 	this.show = false;
			// 	this.printerConfig.density = e.value[0];
			// },
			confirm(e) {
				let i = e.detail.value;
				this.desityDataIndex = i;
				// this.show = false;
				this.printerConfig.density = this.columns[i];
			},

			//打印速度设置 确认事件
			confirmSpeed(e) {
				this.showSpeed = false;
				this.printerConfig.speed = e.value[0];
			},

			//标签间隔设置 确认事件
			confirmGap(e) {
				this.showGap = false;
				this.printerConfig.gap = e.value[0];
			},

			// 单选框弹窗选择
			groupChange(e) {
				// this.radiovalue = e.name;
				this.radiovalue = e.detail.value;
				if (e.id == 2) {
					this.printerConfig.sizeX = 40;
					this.printerConfig.sizeY = 30;
				} else {
					this.printerConfig.sizeX = 70;
					this.printerConfig.sizeY = 50;
				}

			},

			// 单选框Change事件
			attChange(item) {
				this.printerConfig.direction = item.type;
				if (this.printerConfig.direction == 0) {
					this.concentraitonShow = false;
				} else {
					this.concentraitonShow = true;
				}
			},
			//输入框失去焦点
			// leftBlur(res) {
			// 	console.log(res)
			// 	this.printerConfig.leftValue = res;
			// 	if (this.printerConfig.leftValue < 0) {
			// 		this.printerConfig.leftValue = '';
			// 		uni.showToast({
			// 			title: '请输入大于0的数值',
			// 			icon: 'error',
			// 			duration: 2000 // 持续时间为 2 秒
			// 		});
			// 	}
			// },
			// rightBlur(res) {
			// 	this.printerConfig.rightValue = res;
			// 	if (this.printerConfig.rightValue < 0) {
			// 		this.printerConfig.rightValue = '';
			// 		uni.showToast({
			// 			title: '请输入大于0的数值',
			// 			icon: 'error',
			// 			duration: 2000 // 持续时间为 2 秒
			// 		});
			// 	}
			// },

			//打印机配置
			setPrinterConfig(isDefault) {
				console.log('isDefault', isDefault)
				console.log('this.printerConfig', this.printerConfig)
				this.$refs.popupsRefs.setPrinterConfig(isDefault ? {} : this.printerConfig)
			},

			// 打印自检页
			sendBleLabelSelfTest() {
				this.$refs.popupsRefs.sendBleLabelSelfTest();
			}
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}


	.card {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		margin-left: 30rpx;
		border-bottom: 1px solid #f5f5f5;

		label {
			width: 100px;
		}

		// input {
		// 	flex: 1;
		// 	height: 60rpx;
		// 	border: 1rpx solid #ccc;
		// 	border-radius: 4rpx;
		// 	padding: 0 20rpx;
		// }
	}

	.sku-select1 {
		margin-left: 15%;

		.radio {
			margin: 8rpx 8rpx;
			background-color: #f7f7f7;
			// line-height: 62rpx;
			float: left;
			text-align: center;
			color: #777;
			padding: 16rpx 34rpx;
			font-size: 26rpx;
			font-weight: bolder;
			border-radius: 20rpx;
			border: 1rpx solid #FFF;
		}

		.active {
			@include main_color(theme);
			@include main_bg_rgba_color(theme, 0.05);
			border: 1rpx solid;
		}
	}

	.u-demo-block {
		height: 40vh;
		padding: 20px;
	}

	.u-demo-block2 {
		height: 70vh;
		padding: 20px;
	}

	.u-demo-block__title {
		font-size: 16px;
		font-weight: bold;
		display: block;
		text-align: center;
		margin-bottom: 20px;
		position: relative;

		.iconfont {
			position: absolute;
			right: 20rpx;
			top: 0;
		}
	}

	.footer {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		padding: 10px;
		background-color: #fff;
	}

	.footer button {
		line-height: 92rpx;
		font-weight: bold;
		border-radius: 20rpx;
		text-align: center;
		color: #fff;
	}
</style>